<template>
  <div class="jwChat">
    <div class="main">
      <div class="header">
        <div class="r-close">
          <i class="el-icon-close" title="关闭" @click="close" />
        </div>
        <img
          v-if="productLogo"
          :src="productLogo"
          :width="productLogoWidth ? productLogoWidth : 50"
          :height="productLogoHeight ? productLogoHeight : 50"
          class="sidebar-logo"
        >
        <h1 class="sidebar-title">
          {{ $t(productName) ? $t(productName) : "J博士投资管理系统" }}
        </h1>
      </div>
      <div class="content">
        <div v-for="v in totalMessage" :key="v.id">
          <div v-if="v.feedbackType == 'USER'" class="web__main-item">
            <div class="web__main-user">
              <el-avatar icon="el-icon-user-solid" />
              <cite>
                {{ v.name }} <i>{{ v.createTime }}</i></cite>
            </div>
            <div class="web__main-text">
              <div class="web__main-arrow" />
              <span
                class="item_msg"
              ><span>{{ v.describe }}</span></span>
            </div>
          </div>

          <div v-else class="web__main-item web__main-item--mine">
            <div class="web__main-user">
              <el-avatar icon="el-icon-user-solid" />
              <cite>
                {{ v.name }} <i>{{ v.createTime }}</i></cite>
            </div>
            <div class="web__main-text">
              <div class="web__main-arrow" />
              <span
                class="item_msg"
              ><span>{{ v.describe }}</span></span>
            </div>
          </div>
        </div>

        <!-- <div v-for="v in clientMessage" :key="v" class="web__main-item">
          <div class="web__main-user">
            <el-avatar icon="el-icon-user-solid" />
            <cite>
              {{ v.name }} <i>{{ v.createTime }}</i></cite
            >
          </div>
          <div class="web__main-text">
            <div class="web__main-arrow" />
            <span class="item_msg"
              ><span>{{ v.describe }}</span></span
            >
          </div>
        </div>
        <div
          v-for="v in manaerMessage"
          :key="v"
          class="web__main-item web__main-item--mine"
        >
          <div class="web__main-user">
            <el-avatar icon="el-icon-user-solid" />
            <cite>  {{ v.name }} <i>{{ v.createTime }}</i></cite>
          </div>
          <div class="web__main-text">
            <div class="web__main-arrow" />
            <span class="item_msg"
              ><span
                >{{ v.describe }}</span
              ></span
            >
          </div>
        </div> -->
      </div>
      <div class="bottom">
        <div class="web__msg" @keyup.enter="handleSend">
          <textarea
            ref="msgBox"
            v-model="currentMsg"
            rows="3"
            placeholder="请输入内容..."
            class="web__msg-input"
          />
          <div class="web__msg-menu">
            <el-button
              class="web__msg-submit"
              type="primary"
              size="mini"
              @click="handleSend"
            >发送</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getConfigKey } from '@/api/system/config.js'
import {
  findMessageById,
  workFeedbackManager
} from '@/api/system/feedback/feedbackManager.js'
export default {
  name: 'Chat',
  data() {
    return {
      clientMessage: [], // 客户发送的消息
      manaerMessage: [], // 管理端发送的消息
      totalMessage: [], // 全部消息
      productName: '',
      productLogo: '',
      productLogoHeight: '',
      productLogoWidth: '',
      currentMsg: '',
      workId: '',
      form: {
        feedbackId: '',
        describe: ''
      }
    }
  },
watch: {
	totalMessage() {
		this.$nextTick(() => {
		var h = this.$el.querySelector('.content').scrollHeight
          $('.content').scrollTop(h)
		})
	}
},
  mounted() {
    this.$nextTick(() => {
      var container = this.$el.querySelector('.content')
      container.scrollTop = container.scrollHeight
    })
    getConfigKey('productName').then((res) => {
      if (res.code === 200) {
        this.productName = res.msg
      }
    })
    getConfigKey('productLogo').then((res) => {
      if (res.code === 200) {
        this.productLogo = res.msg
      } else {
        this.productLogo = ''
      }
    })

    getConfigKey('productLogoHeight').then((res) => {
      if (res.code === 200) {
        this.productLogoHeight = res.msg
      }
    })

    getConfigKey('productLogoWidth').then((res) => {
      if (res.code === 200) {
        this.productLogoWidth = res.msg
      }
    })
  },
  methods: {
    // 发送数据
    handleSend() {
      // if (this.currentMsg === '' || this.currentMsg == null || this.currentMsg == ' ') {
      //   this.$message('信息不能为空哦')
      //   return false
      // }
       // 当前信息
      this.form.describe = this.currentMsg
      this.form.feedbackId = this.workId
      workFeedbackManager(this.form).then((response) => {
        if (response.code === 200) {
          // 清空聊天框
          this.currentMsg = ''
          this.workList(this.workId)
        }
      })
    },
    // 初始化数据
    init(data) {
      if (data != null && data.id !== undefined) {
        // 保存工单id
        this.workId = data.feedbackId
        this.workList(data.feedbackId)
      }
    },
    workList(id) {
      findMessageById(id).then((response) => {
        this.totalMessage = response.data

        // 过滤出 客户发的数据
        // this.clientMessage = response.data.filter(function (e) {
        //   return e.feedbackType == "USER";
        // });
        // this.manaerMessage = response.data.filter(function (e) {
        //   return e.feedbackType == "MANAGER";
        // });
      })
    },
    close() {
      // 隐藏聊天框
      // this.$refs.feedbackManagerList.chatOpen=false;
      // console.log(this.$refs.feedbackManagerList)
      this.$emit('child-close', 'false')
    }
  }

}
</script>
<style lang="scss" scoped>
.jwChat {
  // background-image: linear-gradient(to bottom right, #7a88ff, #7affaf);
  // height: 100%;
  height: 1000px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .main {
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    width: 750px;
    height: 70%;
    overflow: hidden;
    .header {
      background-color: #409eff;
      display: flex;
      margin: 0 auto;
      padding-left: 12px;
      align-items: center;
      height: 60px;
      position: relative;
      color: #fff;
      .r-close {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 26px;
      }
      .r-close:hover {
        cursor: pointer;
      }
    }
    .content {
      height: calc(100% - 200px);
      overflow: auto;
      padding: 10px;
      margin-right: -10px;
    }
    .bottom {
      height: 140px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.1);
      position: relative;
      .web__msg-input {
        display: block;
        padding: 10px;
        width: 100%;
        height: 105px;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        resize: none;
        outline: 0;
        background-color: #fff;
        border: 0;
        word-break: break-all;
        font-size: 13px;
        line-height: 17px;
        -webkit-appearance: none;
      }
      .web__msg-menu {
        text-align: right;
        margin-right: 10px;
      }
    }
  }
}
.web__main-item {
  position: relative;
  font-size: 0;
  margin-bottom: 10px;
  padding-left: 60px;
  min-height: 68px;
  text-align: left;
  .web__main-user {
    position: absolute;
    cursor: pointer;
    left: 3px;
    cite {
      position: absolute;
      left: 60px;
      top: -2px;
      /* width: 500px; */
      line-height: 24px;
      font-size: 12px;
      white-space: nowrap;
      color: #999;
      text-align: left;
      font-style: normal;
      i {
        padding-left: 15px;
        font-style: normal;
      }
    }
  }
  .web__main-text {
    max-width: 75%;
    position: relative;
    line-height: 22px;
    margin-top: 25px;
    padding: 8px 15px;
    background-color: #f3f3f3;
    border-radius: 3px;
    border: 1px solid #f0f0f0;
    color: #000;
    word-break: break-all;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    .web__main-arrow {
      top: 6px;
      left: -8px;
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 8px;
      border-left-width: 0;
      border-right-color: #ebeef5;
      &::after {
        content: " ";
        top: -7px;
        left: 1px;
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 7px;
        border-left-width: 0;
        border-right-color: #ebeef5;
      }
    }
  }
}
.web__main-item--mine {
  text-align: right;
  padding-left: 0;
  padding-right: 60px;
  .web__main-user {
    left: auto;
    right: 3px;
    cite {
      left: auto;
      right: 60px;
      text-align: right;
      i {
        padding-left: 15px;
        padding-right: 0;
      }
    }
  }
  .web__main-text {
    margin-left: 0;
    text-align: left;
    background-color: #409eff;
    color: #fff;
    .web__main-arrow {
      left: auto;
      right: -5px;
      border-color: transparent;
      border-style: solid;
      border-width: 8px;
      border-right-width: 0;
      border-left-color: #409eff;
      &::after {
        left: auto;
        right: -2px;
        border-color: transparent;
        border-style: solid;
        border-width: 7px;
        border-right-width: 0;
        border-left-color: #409eff;
      }
    }
  }
}
</style>
